<template>
  <div>
    <!-- 搜索区域 -->
    <el-row>
      <el-form :inline="true" :model="dataList">
        <el-form-item label="类型名称">
          <el-input v-model="queryInfo.categoryName" placeholder="请输入类型名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getdata">搜索</el-button>
          <el-button type="primary" @click="showAddcommd">新增类型</el-button>
          <el-button type="danger" @click="delBacth">批量删除</el-button>
          <!-- 新增或修改弹出框 -->
          <el-dialog
            v-model="dialogVisible"
            :title="title"
            width="600"
            :before-close="handleClose"
            ref:ruleFormRef
          >
            <el-form
              :model="dataList"
              label-width="auto"
              style="max-width: 600px"
              ref="ruleFormRef"
              :rules="rules"
            >
              <el-form-item label="类型名称">
                <el-input
                  v-model="dataList.categoryName"
                  placeholder="请输入类型名称"
                  style="width: 300px;"
                />
              </el-form-item>  
              <el-form-item id="button">
                <el-button type="primary" @click="add">确认</el-button>
                <el-button type="primary" @click="cancel">取消</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 表格区域 -->
    <el-table
      :data="dataList1"
      border
      style="width: 100%"
      stripe="true"
      :row-style="{height: '50px'}"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column align="center" prop="id" label="ID"></el-table-column>
      <el-table-column align="center" prop="categoryName" label="类型名称"></el-table-column>
      <el-table-column align="center" label="操作">
        <template v-slot="scope">
          <el-button-group>
            <el-button type="primary" plain @click="showUpdatecommd(scope.row)">编辑类型名称</el-button>
          </el-button-group>
          <el-button type="danger" plain @click="del(scope.row.id)">删除类型</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div id="footer">
      <el-pagination
        background
        :default-page-size="5"
        :page-sizes="[5, 8, 10]"
        :size="size"
        :disabled="disabled"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="changePageNum"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>
    
<script setup >
import { ref, onMounted, getCurrentInstance, watchEffect } from "vue";
import {
  ElMessageBox,
  ElMessage
} from "element-plus";

import { SortUp, Plus } from "@element-plus/icons-vue";
import ArticleCategory from "./ArticleCategory.vue";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";

const dialogVisible = ref(false);
const ruleFormRef = ref();
const currentInstance = getCurrentInstance();
const { $http } = currentInstance.appContext.config.globalProperties;
const dataList1 = ref([]);

const total = ref();
const title = ref("");
let ids = ref([]);

// 定义查询对象 用来获取表单数据
let queryInfo = ref({
  categoryName: "",
  id: "",
  pageNum: 1,
  pageSize: 5
});


//新增文章类型信息
const dataList = ref({
  addOrUpdateFlag: 1, // 判断是新增还是修改的标志 1:新增 2：修改
  id: 0, // id
  categoryName: '', // 分类id
  del: 0 //逻辑删除状态
});

//添加
function add() {
  if (dataList.value.addOrUpdateFlag == 1) {
    $http({
      method: "post",
      url: "http://localhost:8081/sfzy/articleCategory",
      data: dataList.value
    }).then(res => {
      console.log("res=" + res);
      if (res.data.code == 200) {
        ElMessage.success("添加成功！");
        res.data.message;
      } else {
        ElMessage.error("添加失败！");
      }
      //再次查询
      getdata();
      //调用取消清空数据
      cancel();
    });
  } else if (dataList.value.addOrUpdateFlag == 2) {
    $http({
      method: "put",
      url: "http://localhost:8081/sfzy/articleCategory",
      data: dataList.value
    }).then(res => {
      console.log("res=" + res);
      if (res.data.code == 200) {
        ElMessage.success("修改成功！");
        res.data.message;
      } else {
        ElMessage.error("修改失败！");
      }
      //再次查询
      getdata();
      //调用取消清空数据
      cancel();
    });
  }
}

//挂载后执行请求community数据
onMounted(() => {
  getdata();
});
//数据请求方法
function getdata() {
  $http({
    method: "get",
    url: "http://localhost:8081/sfzy/articleCategory/page",
    params: queryInfo.value
  }).then(res => {
    dataList1.value = res.data.data.list;
    total.value = res.data.data.total;
  });
}

//获取selection中的数据
function handleSelectionChange(val) {
  ids.value =val.map(item=>item.id)
}

//使用属性监听器获取 开始时间 和 结束时间
watchEffect(function() {
  //监听获取到的是一个数组数据
});

//pageNum
function changePageNum(num) {
  // 修改页码
  queryInfo.value.pageNum = num;
  //再次查询
  getdata();
}

//pageSize
function handleSizeChange(size) {
  queryInfo.value.pageSize = size;
  getdata();
}

//新增
function showAddcommd() {
  title.value = "新增类型";
  (dialogVisible.value = true), (dataList.value.addOrUpdateFlag = 1);
}

//修改
function showUpdatecommd(val) {
  title.value = "修改类型";
  (dialogVisible.value = true),
    //回显数据
    (dataList.value = val);
  dataList.value.addOrUpdateFlag = 2;
}

//取消
function cancel() {
  dialogVisible.value = false;
  dataList.value = {
    addOrUpdateFlag: 1, // 判断是新增还是修改的标志 1:新增 2：修改
    id: "", // id
    categoryName: "", // 分类id
    del: "" //逻辑删除状态
  };
}

/*---------------- 删除/批量删除 部分------------------------*/
//删除
function del(id) {
  
  ElMessageBox.confirm("确认要删除数据吗?", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      $http({
        method: "delete",
        url: "http://localhost:8081/sfzy/articleCategory/" + id
      }).then(res => {
        if (res.data.code == 200) {
          ElMessage.success("删除成功！");
          getdata();
        } else {
          ElMessage.error("删除失败！");
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除！"
      });
    });
}
//批量删除
function delBacth() {
  if(ids.value!=null && ids.value!=''){
  ElMessageBox.confirm("确认要删除数据吗?", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      $http({
        method: "delete",
        url: "http://localhost:8081/sfzy/articleCategory?ids=" + ids.value
      }).then(res => {
        if (res.data.code == 200) {
          ElMessage.success("删除成功！");
          getdata();
        } else {
          ElMessage.error("删除失败！");
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除！"
      });
    });
  }
}
</script>
    
<style scoped>
:deep(.ql-container) {
  min-height: 200px;
  min-width: 468px;
  max-width: 468px;
  max-height: 200px;
}

#button {
  margin-left: 250px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-pagination {
  margin-left: 200px;
}

#footer {
  height: 80px;
  margin: 40px;
}

</style>